import React, {useMemo} from 'react';
import {CaseParams} from '../gen/genUtil';
import {GenMain} from '../gen/gen';
import {Skia, useFonts, TextAlign} from '@shopify/react-native-skia';

export default function () {
  const customFontMgr = useFonts({
    Roboto: [
      require('../../assets/fonts/Roboto-Regular.ttf'),
      require('../../assets/fonts/Roboto-Medium.ttf'),
    ],
  });

  const paragraph = useMemo(() => {
    try {
      if (!customFontMgr) {
        console.log('Font manager not loaded yet');
        return null;
      }

      const paragraphStyle = {
        textAlign: TextAlign.Center,
      };
      const textStyle = {
        fontFamilies: ['Roboto'],
        color: Skia.Color('black'),
        fontSize: 50,
      };

      const builder = Skia.ParagraphBuilder.Make(paragraphStyle, customFontMgr);
      if (!builder) {
        console.error('Failed to create paragraph builder');
        return null;
      }

      builder.pushStyle(textStyle);
      builder.addText('Say Hello to ');
      builder.pushStyle({...textStyle, fontStyle: {weight: 500}});
      builder.addText('Skia 🎨');
      builder.pop();

      const para = builder.build();
      if (!para) {
        console.error('Failed to build paragraph');
        return null;
      }

      return para;
    } catch (error) {
      console.error('Error creating paragraph:', error);
      return null;
    }
  }, [customFontMgr]);

  if (!paragraph) {
    return null;
  }

  const basicProps = {
    paragraph: paragraph,
    x: 0,
    y: 0,
    width: 256,
  };

  const basicCases: CaseParams[] = [
    {
      key: 'paragraph',
      values: [paragraph],
    },
    {
      key: 'x',
      values: [0, 20, 40],
    },
    {
      key: 'y',
      values: [0, 20, 40],
    },
    {
      key: 'width',
      values: [64, 128, 256],
    },
  ];

  const allCases = [...basicCases];

  return (
    <GenMain
      cases={allCases}
      basicProps={basicProps}
      noGroup={true}
      comName="Paragraph"
    />
  );
}